<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="content">
				<view class="custom-title">发布需求</view>
			</block>
		</cu-custom>
		<view class="filling-div">
			<view class="filling-content">
				<view class="title">需求标题：</view>
				<view>
					<input class="input-class" placeholder="请输入" name="input"></input>
				</view>
				
				<view class="title padding-top-32">意向区域：</view>
				<view>
					<input class="input-class" placeholder="请输入" name="input"></input>
				</view>
				
				<view class="title padding-top-32">预算总价：</view>
				<view>
					<input class="input-class" placeholder="请输入" name="input"></input>
				</view>
				
				<view class="title padding-top-32">时间：</view>
				<view class="flex align-center justify-center date-content">
					<picker mode="date" :value="start" start="1950-01-01" end="2099-12-21" @change="startChange">
						<view class="picker">
							{{start?start:'开始时间'}}
						</view>
					</picker>
					<text class="padding-left-12 padding-right-12">——</text>
					<picker mode="date" :value="end" start="1950-01-01" end="2099-12-21" @change="endChange">
						<view class="picker">
							{{end?end:'结束时间'}}
						</view>
					</picker>
				</view>
				
				<view class="title padding-top-32">需求描述：</view>
				<view>
					<textarea class="textare-class" placeholder="请输入"></textarea>
				</view>
			</view>
			
			<button class="cu-btn filling-btn" >确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				start:"",
				end:""
			}
		},
		onLoad() {
		},
		methods: {
			startChange(e){
				this.start=e.detail.value
			},
			endChange(e){
				this.end=e.detail.value
			}
		}
	}
</script>

<style scoped lang="less">
	.filling-div{
		padding: 48rpx 32rpx;
		.filling-content{
			background: #FFFFFF;
			border-radius: 52rpx;
			padding: 48rpx 32rpx 64rpx;
			.title{
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}
			.input-class{
				margin-top: 16rpx;
				width: 100%;
				height: 68rpx;
				background: #FFFFFF;
				border-radius: 48rpx;
				border: 2rpx solid #000000;
				padding-left: 28rpx;
			}
			.textare-class{
				margin-top: 16rpx;
				width: 100%;
				height: 216rpx;
				background: #FFFFFF;
				border-radius: 48rpx;
				border: 2rpx solid #000000;
				padding: 28rpx;
			}
			.date-content{
				margin-top: 16rpx;
				width: 100%;
				height: 68rpx;
				background: #FFFFFF;
				border-radius: 48rpx;
				border: 2rpx solid #000000;
				color: #CCCCCC;
			}
		}
		.filling-btn{
			margin-top: 64rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #24458E;
			border-radius: 48rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			width: 100%;
		}
	}
</style>